<!DOCTYPE html>
<html>
<head>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src='https://code.jquery.com/jquery-1.8.3.min.js'></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<title>Example</title>
</head>
<body>
  <div class='container'>
    <div class='row'>
      <div class='col-md-12'>
        <h1>Example</h1>
        <input type='button' class='btn' id='create' value='create'/>
        <input type='button' class='btn' id='read' value='read'/>
        <input type='button' class='btn' id='update' value='update'/>
        <input type='button' class='btn' id='delete' value='delete'/>
        <script type='text/javascript' src='https://syuemingfang-crud.googlecode.com/git/js/crud.js'></script>
        <script type='text/javascript' src='js/crud.js'></script>
        <script>

        var data=[{
            'id': '1',
            'name': 'Tom',
            'age': '20'
        },{
            'id': '2',
            'name': 'Jack',
            'age': '21'
        }]
        $.crud.create({name:'crud_plugin', range:'all', data: data});
        $('#create').click(function(){
          var data={
              'id': '3',
              'name': 'Sam',
              'age': '25'
          }
          $.crud.create({name:'crud_plugin', data: data});
        });
        $('#read').click(function(){
          console.log($.crud.read({name:'crud_plugin'}));
        });
        $('#update').click(function(){
          var data={
            'id': '1',
            'name': 'Frank',
            'age': '30'             
          }
          $.crud.update({name:'crud_plugin', key: 'id', val: '1', data: data});
        });   
        $('#delete').click(function(){
          $.crud.delete({name:'crud_plugin', key: 'id', val: '2'});
        });   
        </script>
      </div>
    </div>
  </div>
</body>
</html>